<template>
  <div class="container">

    <div class="table">
      <el-table :data="tableData" border stripe :key="isUpdate" table-layout="fixed" height="605" style="width: 100%">
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="birthday" label="生日" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <div class="btn">
              <menuAuthority :id="scope.row.id"></menuAuthority>
              <el-button type="danger" round size="small" @click="deleteFn(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <div></div>
      <el-config-provider :locale="zhCn">
        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize" :page-sizes="[20, 50, 75, 100]" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-config-provider>
    </div>
  </div>
</template>
<script  setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { getUserList, deleteById } from '@/api/index.js'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import menuAuthority from '@/view/PermissionMenu/cpn/menuAuthority.vue'

let tableData = reactive([])
const isUpdate = ref(false)
// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})
onMounted(() => {
  getUserListFn(pagination)
})
// 获取用户列表
const getUserListFn = pagination => {
  getUserList(pagination).then(res => {
    isUpdate.value = !isUpdate.value
    tableData = res.data.SeismicInformationList
    pagination.pageSize = res.data.pagination.pageSize
    pagination.total = res.data.pagination.total
    pagination.currentPage = res.data.pagination.currentPage
  })
}
// 大小发生改变
const handleSizeChange = val => {
  console.log(val)
  pagination.pageSize = val
  getUserListFn(pagination)
}
// 页码发生改变
const handleCurrentChange = val => {
  pagination.currentPage = val
  getUserListFn(pagination)
}
const { proxy } = getCurrentInstance()
// 删除
const deleteFn = id => {
  deleteById(id).then(res => {
    if (res.data) {
      proxy.$Message({
        type: 'success',
        message: '删除成功'
      })
      getUserListFn(pagination)
    } else {
      proxy.$Message.error('删除失败')
    }
  })
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .table {
    height: 95%;
  }
  .pagination {
    padding-top: 0px;
    padding-right: 5px;
    display: flex;
    justify-content: space-between;
  }
}
/deep/ .el-table .cell {
  text-align: center;
}
.btn {
  display: flex;
}
</style>